<template>
  <el-container class="shite">
    <el-aside class="left" width="180px">
      <el-menu
        default-active="BuildingList"
        @select="change"
        class="left-menu"
        active-text-color="#2B2B2B"
      >
        <el-submenu index="building" popper-class="dddf">
          <template slot="title">
            <span>楼层管理</span>
          </template>
          <el-menu-item index="BuildingList">楼层管理列表</el-menu-item>
          <el-menu-item index="AddBuildingInfo">添加楼层信息</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container class="right">
      <component :is="currentView"></component>
    </el-container>
  </el-container>
</template>
<script>
import AddBuildingInfo from "./components/addBuildingInfo";
import BuildingList from "./components/buildingList";

export default {
  name: "basicInfo",
  components: {
    AddBuildingInfo,
    BuildingList
  },
  data() {
    return {
      currentView: "BuildingList",
      fullHeight: document.documentElement.clientHeight - 95
    };
  },
  created() {
    console.log(document.documentElement.clientHeight);
  },
  methods: {
    change(name) {
      console.log(name);
      this.currentView = name;
    }
  }
};
</script>

<style scoped lang="less">
.shite {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow: hidden;
  background-color: #fff;
  .left {
    width: 180px;
    height: 100%;
    background-color: #f2f7fb;
    overflow-x: hidden;
    .left-menu {
      text-align: center;
      background-color: #f2f7fb;
      .el-menu-item {
        font-size: 16px;
      }
      span {
        font-size: 16px;
      }
      .el-submenu {
        li {
          font-size: 14px;
          color: #747474 !important;
        }
      }
    }
  }
  /* ::-webkit-scrollbar {
    display: none;
  } */
  .right {
    flex: 1;
    padding: 20px;
    padding-right: 70px;
  }
}
</style>

<style lang="less">
.left {
  .el-menu {
    background-color: #f2f7fb;
  }

  .el-menu-item {
    color: #2b2b2b !important;
    border-bottom: 1px solid #cddeed;
  }
  .el-submenu__title {
    border-bottom: 1px solid #cddeed;
  }
  .el-submenu__title:hover{
    color: #303133;
  }
  .el-menu-item.is-active {
    background-color: #E6E6E6;
  }
  .el-submenu.is-active {
    .el-menu-item.is-active {
      background-color: #E6E6E6;
    }
  }
  .el-submenu.is-active .el-submenu__title {
    border-bottom: 1px solid #cddeed;
  }
}
</style>
